<template>
	<view class="giveName">
		<image class="app_bg" src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/yys/bj.png" />
    <view class="search_box">
      <input class="giveName_search" placeholder="请输入姓氏（必须汉字）"
       v-model="model.name" />
       <image src="../../static/pages/search_icon.png" />
    </view>
    <view class="giveName_title">
      <image src="../../static/pages/rmxs_title.png" />
    </view>
    <view class="giveName_con">
      <view class="giveName_item" @click="toPages('/pages/giveName/fiveElements')"
       v-for="(item, index) in nameList" :key="index">
        <image class="giveName_img1" src="../../static/pages/giveName_item1.png" />
        <image class="giveName_img2" src="../../static/pages/giveName_item2.png" />
        <view class="giveName_text">{{ item.title }}</view>
      </view>
    </view>
	</view>
</template>

<script setup>
import request from '../../common/js/request'
import { ref, onMounted } from 'vue'

let model = ref({});

let nameList = [
  { value: 1, title: '赵' },
  { value: 2, title: '钱' },
  { value: 3, title: '孙' },
  { value: 4, title: '李' },
  { value: 5, title: '周' },
];

const toPages = function (path) {
	uni.navigateTo({
		url: path
	});
}
</script>

<style lang="less" scoped>
.giveName {
  box-sizing: border-box;
  padding: 80rpx;
  .search_box {
    position: relative;
    .giveName_search {
      box-sizing: border-box;
      width: 100%;
      height: 80rpx;
      padding: 18rpx 80rpx 18rpx 24rpx;
      border-radius: 8rpx;
    }
    &>image {
      position: absolute;
      top: 50%;
      right: 30rpx;
      transform: translateY(-50%);
      width: 40rpx;
      height: 40rpx;
    }
  }
  .giveName_title {
    margin: 30rpx auto;
    width: 312rpx;
    height: 70rpx;
    &>image {
      width: 100%;
      height: 100%;
    }
  }
  .giveName_con {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 30rpx;
    .giveName_item {
      position: relative;
      .giveName_img1 {
        width: 100%;
        height: 140rpx;
        opacity: 1;
      }
      .giveName_img2 {
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 91%;
        height: 120rpx;
        opacity: 1;
      }
      .giveName_text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32rpx;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 46rpx;
        color: rgba(117, 72, 59, 1);
        text-align: center;
        vertical-align: top;
      }
    }
  }
}
</style>